<!DOCTYPE html>
<html lang="en">

<head>
    <title>${title!'活动详情'}</title>
    <#include "/zz/components/meta.html" />
    <#include "/zz/components/stylesheets.html" />
    <link rel="stylesheet" href="/zz/stylesheets/activityInfo.css?v=2">
</head>

<body>
    <div id="app">
        <img class="top-image" :src="info.image"></img>
        <div class="title-container">
            <span class="title">{{ info.title }}</span>
            <span class="subtitle" v-if="info.subtitle">{{ info.subtitle }}</span>
        </div>
        <!-- <p class="content">{{ info.intro }}</p> -->
        <!-- <div class="content">{{ info.intro }}</div> -->
        <div class="content" v-html='info.intro'></div>
        <div class="button-container">
            <div class="button" style="background-color: #bbb;" v-if="info.status == 0">未开始</div>
            <div class="button theme-background-color1" v-else-if="info.status == 1" @click="enroll">我要报名</div>
            <div class="button theme-background-color1" v-else-if="info.status == 2" @click="enter">立即参加</div>
            <div class="button" style="background-color: #bbb;" v-else-if="info.status == 3">已结束</div>
        </div>
    </div>
    <#include "/zz/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                dt:"",
                info: toJson2(`${info!'{}'}`)
            }
        },
        mounted: function() {
            // alert('123')
            this.info.intro = trimStrBr(this.info.intro)
        },
        methods: {
            enroll() {
                window.location.href = "/zz/web/enroll/" + this.info.code;
            },
            enter() {
                window.location.href = "/zz/web/attend/" + this.info.code;
            }
        }
    })
    </script>
</body>

</html>